import { ConfigEnv, defineConfig, loadEnv, UserConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import IconsResolver from "unplugin-icons/resolver";
import AutoImport from "unplugin-auto-import/vite";
import Icons from "unplugin-icons/vite";
import { createHtmlPlugin } from "vite-plugin-html";
import { resolve } from "path";
import eslintPlugin from "vite-plugin-eslint";
import postCssPxToRem from "postcss-pxtorem";
import vueSetupExtend from "vite-plugin-vue-setup-extend";
import dayjs from "dayjs";

const BUILD_TIME = dayjs().format("YYYY-MM-DD HH:mm:ss");

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
	const env = loadEnv(mode, resolve(process.cwd(), "./env"), "ENV_");
	console.log(env);
	console.log(mode);

	return {
		base: "./",
		envDir: resolve(process.cwd(), "./env"),
		envPrefix: "ENV_",
		define: {
			ENV_BUILD_TIME: JSON.stringify(BUILD_TIME)
		},
		resolve: {
			alias: {
				"@": resolve(process.cwd(), "./src"),
				"~C": resolve(process.cwd(), "./src/components"),
				"~V": resolve(process.cwd(), "./src/views"),
				"~I": resolve(process.cwd(), "./src/assets/images"),
				"/header": resolve(process.cwd(), "./src/assets/images/header")
			}
		},
		plugins: [
			vue(),
			vueSetupExtend(),
			// * EsLint 报错信息显示在浏览器界面上
			eslintPlugin(),
			//Vant  自动导入
			Components({
				dts: mode == "development",
				resolvers: [
					ElementPlusResolver(),
					IconsResolver({
						enabledCollections: ["ep", "fa6-regular", "fa"]
					})
				],
				dirs: ["src/components", "src/**/components"]
			}),
			Icons({
				autoInstall: true
			}),
			createHtmlPlugin({
				minify: true
			}),
			AutoImport({
				dts: mode == "development",
				include: [/\.[tj]sx?$/, /\.vue$/, /\.vue\?vue/],
				imports: ["vue", "vue-router", "pinia"],
				resolvers: [
					ElementPlusResolver(),
					IconsResolver({
						prefix: "Icon"
					})
				],
				cache: true,
				eslintrc: { enabled: false }
			})
		],
		css: {
			preprocessorOptions: {
				scss: {
					additionalData: '@import "@/index.scss";'
				}
			},
			postcss: {
				plugins: [
					postCssPxToRem({
						rootValue: 16, // 1rem的大小
						propList: ["*"] // 需要转换的属性，这里选择全部都进行转换
					})
				]
			}
		},
		esbuild: {
			pure: ["debugger"]
		},
		build: {
			emptyOutDir: true,
			minify: "esbuild",
			outDir: resolve(process.cwd(), "./output"),
			//启用/禁用 CSS 代码拆分。当启用时，在异步 chunk 中导入的 CSS 将内联到异步 chunk 本身，并在块加载时插入。
			// 如果禁用，整个项目中的所有 CSS 将被提取到一个 CSS 文件中。
			cssCodeSplit: true,
			//在构建生产包时生成 source Map 文件
			sourcemap: mode !== "production",
			//启用/禁用 gzip 压缩大小报告。压缩大型输出文件可能会很慢，因此禁用该功能可能会提高大型项目的构建性能。
			reportCompressedSize: false
			//自定义底层的 Rollup 打包配置。查看https://rollupjs.org/guide/en/#big-list-of-options
			// rollupOptions: {}
		},
		server: {
			host: true,
			port: 80, // 设置服务启动端口号
			open: true, // 设置服务启动时是否自动打开浏览器
			cors: true, // 允许跨域
			// 设置代理，根据我们项目实际情况配置
			proxy: {
				"^/api/": {
					target: "https://test-jingzhu-front.tyll.net.cn",
					changeOrigin: true,
					ws: true,
					//激活到目标连接的安全SSL证书的验证
					secure: false
				}
			}
		}
	};
});
